<template>
    <div class="video-pull" @click="goHome()">
        <a title="点击下拉">
            <div class="pull-point" ref="pullPoint"></div>
        </a>
    </div>
</template>

<script>
export default {
    methods: {
        goHome() {
            this.$router.replace({name: "Index"})
        }
    },
    mounted() {
        let i=0;
        const render = () => {
            window.requestAnimationFrame(render);
            if(this.$refs["pullPoint"]) i < 80 ? this.$refs["pullPoint"].style.backgroundPositionY = `${i++}px` : i = 0
        }
        render()
    }
}
</script>

<style lang="scss" scoped>
.video-pull {
    position: absolute;
    bottom: 40px;
    display: flex;
    width: 100%;
    justify-content: center;
    cursor: pointer;

    .pull-point {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-color: rgba(144, 147, 153, .5);
        cursor: pointer;
        background-clip: border-box;
        // background-image: url("../../../../assets/video/pull_point.png");
    }
}
</style>